<template>
  <view
    class="popPof"
    v-if="show"
    :style="[
      {
        paddingTop: 'calc(' + statusBarHeight + 'px + 44px)'
      }
    ]"
  >
    <view class="mAttrContent">
      <view class="mAttrItem">
        <view class="let"></view>
        <view class="rig">
          <view class="text">{{ $t("admin.spec") }}</view>
          <view class="input">
            <input
              class="inp"
              v-model="attrValue"
              type="text"
              :placeholder="$t('admin.attrGroup')"
              @confirm="addAttrGroup('attrValue')"
            />
          </view>
          <view class="add" @click="addAttrGroup('attrValue')">
            <i class="iconfont icon-add-select"></i>
            <view>{{ $t("admin.add") }}</view>
          </view>
        </view>
      </view>

      <view
        class="mAttrItem"
        v-for="(item, index) of AttrGroupList"
        :key="index"
      >
        <view class="icon" @click="delAttrGroup(index)">
          <view class="iconItem">
            <text></text>
          </view>
        </view>
        <!-- <view class="let"></view> -->
        <view class="rig">
          <view class="text">{{ item.attr_group_name }}</view>
          <view class="input">
            <input
              class="inp"
              v-model="item.value"
              type="text"
              :placeholder="$t('newAdmin.warning.PleaseFillIn')"
              @confirm="addAttr(item.value, index, item.attr_group_name)"
            />
          </view>
          <view
            class="add"
            @click="addAttr(item.value, index, item.attr_group_name)"
          >
            <i class="iconfont icon-add-select"></i>
            <view>{{ $t("admin.add") }}</view>
          </view>
        </view>
      </view>

      <view v-for="(item, index) of AttrGroupList" :key="item.attr_group_name">
        <view class="mAttrTitle" v-if="item.attr_list.length">{{
          item.attr_group_name
        }}</view>
        <view class="mAttrItem" v-for="(cItem, i) of item.attr_list" :key="i">
          <view class="icon" @click="delAttr(index, i)">
            <view class="iconItem">
              <text></text>
            </view>
          </view>

          <view class="rig">
            <view class="text">{{ cItem.attr_name }}</view>
          </view>
        </view>
      </view>

      <view class="GoodsAttr" v-if="GoodsAttr.length">
        <view class="filter">
          <view class="filterLet">
            {{ $t("newAdmin.goods.SetPriceInventory") }}
          </view>

          <view class="filterRig" @click="BatchProcessing = !BatchProcessing">
            <i class="iconfont icon-nav-list"></i>
            <view class="text">{{ getStatus }}</view>
          </view>
        </view>

        <view
          class="GoodsAttrItem"
          v-for="(item, index) of GoodsAttr"
          :key="index"
          @click="checked(item)"
        >
          <view class="checkBox" v-if="BatchProcessing">
            <checkbox-group>
              <checkbox class="checkbox" :checked="item.checked" />
            </checkbox-group>
          </view>

          <view class="let">
            <view class="img" @click.stop="file(item)">
              <image :src="item.pic" mode="aspectFill"></image>
            </view>

            <view class="txt">
              <view class="tit">{{ getAttr(item) }}</view>
              <view class="no">{{ $t("admin.article") }} {{ item.no }}</view>
            </view>
          </view>

          <view class="rig">
            <view class="rigPrice">
              <view class="price">￥{{ item.price }}</view>
              <view class="num"
                >{{ $t("newAdmin.goods.num") }}{{ item.num }}</view
              >
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>

      <view class="editFooter">
        <view v-if="!BatchProcessing">
          <u-button
            :customStyle="{
              ...customStyle
            }"
            :hoverStartTime="hoverStartTime"
            @click="save"
            >{{ $t("my.save") }}</u-button
          >
        </view>
        <view v-else class="flex">
          <view class="let">
            <checkbox-group @change="changeAll">
              <label>
                <checkbox class="checkbox" :checked="isAll" />{{
                  $t("videoGoods.userInfo.all")
                }}
              </label>
            </checkbox-group>
          </view>

          <view class="btn">
            <u-button
              :customStyle="{
                ...customStyle
              }"
              :hoverStartTime="hoverStartTime"
              @click="openPop('all', 1)"
              >{{ $t("newAdmin.goods.setPrice") }}</u-button
            >
          </view>
          <view class="btn">
            <u-button
              :customStyle="{
                ...customStyle
              }"
              :hoverStartTime="hoverStartTime"
              @click="openPop('all', 2)"
              >{{ $t("newAdmin.goods.setNum") }}</u-button
            >
          </view>
        </view>
      </view>
    </view>

    <pagePopInp
      ref="pagePopInp"
      @changeValue="changeValueAll"
      :title="getTitle"
      :status="batchStatus"
    ></pagePopInp>

    <pagePopForm ref="pagePopForm" @changeValue="changeValue"></pagePopForm>
  </view>
</template>

<script>
import pagePopInp from "./../../components/page-pop-inp.vue";
import pagePopForm from "./page-pop-form.vue";

export default {
  components: {
    pagePopInp,
    pagePopForm
  },

  props: {
    show: {
      type: Boolean,
      default: false
    },

    customStyle: {
      type: Object,
      default() {
        return null;
      }
    },

    attr: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  computed: {
    getTitle() {
      return this.batchStatus === 1 ? "价格" : "库存";
    },

    getStatus() {
      return this.BatchProcessing ? "取消批量" : "批量";
    },

    getAttr() {
      return (item) => {
        return item.attr_list.map((el) => el.attr_name).join("/");
      };
    }
  },

  watch: {
    AttrGroupList: {
      handler(val) {
        if (val.length) {
          this.setGoodsAttr(val);
        }
      },
      deep: true
    },

    // attr: {
    //   handler(val) {
    //     if (val.length) {
    //       this.GoodsAttr = JSON.parse(JSON.stringify(val));
    //     }
    //   },
    //   deep: true,
    // },

    GoodsAttr: {
      handler(val) {
        if (val.every((el) => el.checked)) {
          this.isAll = true;
        } else {
          this.isAll = false;
        }
      },
      deep: true
    }
  },

  data() {
    return {
      batchStatus: 1, // 1.改价格 2.改库存
      newAttrList: [],
      price: "",
      hoverStartTime: 1000000,
      BatchProcessing: false,
      isAll: false,

      attrValue: "",
      addAttrData: { groupName: "" }, // 添加规格数据
      GoodsAttr: [], // 遍历后商品提交规格
      AttrGroupList: [], // 处理后的添加规格
      item: null,
      is_change_attr: 0
    };
  },

  methods: {
    /**
     * 添加规格组
     */
    addAttrGroup(el) {
      if (!this[el]) {
        this.$utils.toast("请填写规格！");
        return;
      }

      this.AttrGroupList.push({
        attr_group_name: this[el],
        attr_list: []
      });

      this[el] = "";

      if (!this.is_change_attr) {
        this.is_change_attr = 1;
      }
    },

    /**
     * 删除规格组
     */
    delAttrGroup(index) {
      this.AttrGroupList.splice(index, 1);
      if (!this.AttrGroupList.length) {
        this.GoodsAttr = [];
      }

      if (!this.is_change_attr) {
        this.is_change_attr = 1;
      }
    },

    delAttr(index1, index2) {
      var attrGroup = this.AttrGroupList;
      attrGroup[index1].attr_list.splice(index2, 1);
      this.AttrGroupList = null;
      this.AttrGroupList = attrGroup;

      if (!this.is_change_attr) {
        this.is_change_attr = 1;
      }
    },

    /**
     * 添加规格值
     */
    addAttr(e, index, groupName) {
      if (!groupName) {
        this.$utils.toast("请填写规格值！");
        return;
      }

      let attrGroup = this.AttrGroupList;

      attrGroup[index].attr_list.push({
        attr_group_name: groupName,
        attr_name: e
      });

      this.AttrGroupList = null;
      this.AttrGroupList = attrGroup;
      this.setGoodsAttr(this.AttrGroupList);

      if (!this.is_change_attr) {
        this.is_change_attr = 1;
      }
    },

    setDefaultAttr() {
      this.GoodsAttr = [
        {
          attr_list: [
            {
              attr_name: "默认"
            }
          ],
          num: 0,
          price: 0,
          supplier_price: 0,
          no: "",
          pic: "",
          share_commission_first: "",
          share_commission_second: "",
          share_commission_third: ""
        }
      ];
    },

    /**
     * 根据添加规格，生成规格数据
     */
    setGoodsAttr(attrGroup) {
      let attrList = [];
      attrList = this.setGoodsAttrItem(attrGroup, [], 0);
      this.GoodsAttr = this.getAttrDataInfo(attrList);
    },
    /**
     * 处理规格数据
     */
    setGoodsAttrItem(attrGroup, attrList, index) {
      var attrList1 = [];
      if (index < attrGroup.length) {
        if (index === 0 || attrList.length === 0) {
          if (attrGroup[index].attr_list.length > 0) {
            attrGroup[index].attr_list.forEach((element) => {
              element.attr_group_name = attrGroup[index].attr_group_name;
              attrList1.push([element]);
            });
          }
        } else {
          if (attrGroup[index].attr_list.length > 0) {
            attrList.forEach((element) => {
              attrGroup[index].attr_list.forEach((element1) => {
                element1.attr_group_name = attrGroup[index].attr_group_name;
                attrList1.push(element.concat([element1]));
              });
            });
          } else {
            attrList1 = attrList;
          }
        }
        ++index;
        return this.setGoodsAttrItem(attrGroup, attrList1, index);
      } else {
        return attrList;
      }
    },

    /**
     * 获取其他详细数据
     */
    getAttrDataInfo(attr) {
      var attrList = [];
      attr.forEach((element) => {
        var setAttr = {};

        if (this.attr.length) {
          this.attr.forEach((element2) => {
            if (element2.attr_list.length === element.length) {
              if (this.compareAttr(element2.attr_list, element)) {
                setAttr = element2;
              }
            }
          });
        }

        var data = {
          attr_list: element,
          num: setAttr && setAttr.num ? setAttr.num : 0,
          price: setAttr && setAttr.price ? setAttr.price : 0,
          no: setAttr && setAttr.no ? setAttr.no : "",
          pic: setAttr && setAttr.pic ? setAttr.pic : "",
          share_commission_first:
            setAttr && setAttr.share_commission_first
              ? setAttr.share_commission_first
              : "",
          share_commission_second:
            setAttr && setAttr.share_commission_second
              ? setAttr.share_commission_second
              : "",
          share_commission_third:
            setAttr && setAttr.share_commission_third
              ? setAttr.share_commission_third
              : ""
        };
        for (const key in setAttr) {
          if (key.indexOf("member") !== -1) {
            data[key] = setAttr[key];
          }
        }
        attrList.push(data);
      });
      return attrList;
    },

    compareAttr(val1, val2) {
      var compareLen = 0;
      val1.forEach((element1) => {
        val2.forEach((element2) => {
          if (element1.attr_name === element2.attr_name) {
            compareLen++;
          }
        });
      });
      return compareLen === val1.length;
    },

    file(item) {
      if (this.BatchProcessing) return;
      this.$utils.uploadImage(1, (res) => {
        this.$set(item, "pic", res);
      });
    },

    checked(item) {
      if (!this.BatchProcessing) {
        let { pagePopForm } = this.$refs;
        this.item = item;
        pagePopForm.no = item.no;
        pagePopForm.price = item.price;
        pagePopForm.num = item.num;
        pagePopForm.showPopup = true;
        return;
      }
      let checked = !!item.checked;
      this.$set(item, "checked", !checked);
    },

    changeAll() {
      this.isAll = !this.isAll;
      let { GoodsAttr } = this;

      if (this.isAll) {
        GoodsAttr.forEach((el) => {
          this.$set(el, "checked", true);
        });
      } else {
        GoodsAttr.forEach((el) => {
          this.$set(el, "checked", false);
        });
      }
    },

    openPop(type, item) {
      if (type === "all") {
        if (!this.GoodsAttr.some((el) => el.checked)) {
          this.$utils.toast("请选择数据！");
          return;
        }

        this.batchStatus = item;
        this.$refs.pagePopInp.showPopup = true;
      } else {
      }
    },

    // 批量修改
    changeValueAll(value) {
      let { batchStatus, GoodsAttr, $refs } = this,
        attr = batchStatus === 1 ? "price" : "num",
        inpDom = $refs.pagePopInp;

      GoodsAttr.forEach((el) => {
        if (el.checked) {
          this.$set(el, attr, value);
        }
      });

      inpDom.showPopup = false;
      inpDom.value = 0;
      inpDom.disabled = false;
    },

    // 单个修改
    changeValue({ no, price, num }) {
      let { item, $refs } = this,
        { pagePopForm } = $refs;

      item.no = no;
      item.price = price;
      item.num = num;
      pagePopForm.disabled = false;
      pagePopForm.showPopup = false;
    },

    // 保存
    save() {
      let GoodsAttr = JSON.parse(JSON.stringify(this.GoodsAttr)),
        { is_change_attr } = this;

      GoodsAttr.forEach((el) => {
        delete el.checked;
      });

      this.Emit.$emit("attr", {
        attr: GoodsAttr,
        is_change_attr
      });
    }
  }
};
</script>

<style lang="less" scoped>
.popPof {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1100;
  overflow: hidden;

  /* #ifdef H5 */
  padding-top: 0 !important;
  /* #endif */
}

.mAttrContent {
  overflow-y: auto;
  padding: 24rpx 20rpx 160rpx;
  height: 100%;
}

.editFooter {
  .u-btn {
    border-radius: 32px !important;

    &:after {
      border-radius: 32px !important;
    }
  }

  .let {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 8rpx;
  }

  .btn {
    margin-left: 12rpx;
  }
}

.mAttrItem {
  display: flex;
  margin-bottom: 24rpx;

  .icon {
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;

    .iconItem {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36rpx;
      height: 36rpx;
      border-radius: 8rpx;
      background: #f60313;

      text {
        width: 16rpx;
        height: 6rpx;
        background: #fff;
      }
    }
  }

  .file {
    margin-right: 20rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    background: #f8f8f8;
  }

  .rig {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    height: 100rpx;
    background: #f8f8f8;
    border-radius: 20rpx;

    .add {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f60413;

      .iconfont {
        margin-right: 5rpx;
        font-size: 36rpx;
      }
    }
  }

  .input {
    flex: 1;
    margin-left: 64rpx;
    color: #888;

    .inp {
      width: 100%;
      font-size: 30rpx;
      color: #333;
    }
  }
}

.filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx;
  /* background: #f8f8f8; */
  font-size: 24rpx;
  color: #666;
}

.filterLet {
  flex: 1;
  overflow: hidden;
  display: flex;

  .item {
    position: relative;
    padding-right: 30rpx;
    margin-right: 64rpx;
  }

  .text {
    color: #666;
  }

  .icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2rpx;
    border-width: 8rpx 8rpx 0;
    border-style: solid;
    border-color: #dbdbdb transparent transparent;
  }
}

.filterRig {
  display: flex;
  align-items: center;
  overflow: hidden;

  .iconfont {
    color: #262626;
    font-size: 36rpx;
  }

  .text {
    margin-left: 5rpx;
  }
}

.GoodsAttrItem {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #f2f2f2;
  font-size: 28rpx;
  color: #262626;
  padding: 24rpx 0;
  margin: 0 24rpx;

  &:last-of-type {
    border-bottom: 0;
  }

  .let {
    flex: 1;
    margin-right: 10rpx;
    overflow: hidden;
    display: flex;
  }

  .img {
    margin-right: 24rpx;
    width: 80rpx;
    height: 80rpx;
    background: #f8f8f8;

    image {
      border-radius: 10rpx;
      width: 100%;
      height: 100%;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
  }

  .tit,
  .no {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .no,
  .num {
    color: #8c8c8c;
  }

  .rig {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .rigPrice {
    text-align: right;
  }

  .iconfont {
    margin-left: 32rpx;
    font-size: 26rpx;
  }
}

.GoodsAttr {
  position: relative;
  z-index: 3;
}
</style>
